// 用于加载模型的函数
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
import gsap from 'gsap'
import * as THREE from 'three'
const manager = new THREE.LoadingManager()
/**
 * 加载模型的管理函数
 * @param {string[]} pathList - 需要加载的模型路径数组
 * @param {Function} successFn - 加载成功的回调函数
 */
export function loadManager(pathList, successFn) {
  // 加载器
  const gltfLoader = new GLTFLoader(manager)
  const fbxLoader = new FBXLoader(manager)
  let preValue = 0 // 上一次进度值
  // 保存加载成功的模型对象数组
  const model = []
  // 机载器对象关联属性和回调函数
  manager.onProgress = (url, loadNum, totalNum) => {
    let progressRatio = Math.floor(loadNum / totalNum * 100)
    gsap.fromTo('#processing-number', {
      innerText: preValue
    }, {
      innerText: progressRatio,
      onUpdate() {
        const num = gsap.getProperty(this.targets()[0], 'innerText')
        this.targets()[0].innerText = num.toFixed(2) + '%'
        // 更新所在点 实现动画效果 preValue需要使用
        preValue = progressRatio
        if (num === 100) {
          successFn(model)
          document.querySelector('#loading').style.display = 'none'
        }
      }
    })
    gsap.fromTo('#loading-bar', {
      scale: preValue / 100
    }, {
      scaleX: progressRatio / 100
    })
  }
  pathList.forEach(path => {
    if (path.indexOf('fbx') > -1) {
      // fbx模型文件路径
      fbxLoader.load(path, fbx => {
        model.push({
          model: fbx,
          url: path
        })
        // 当存储模型的对象的数组的长度与传入的路径对象的数组的长度相同 代表加载过程已经完成 可以执行成功的函数了
        // (model.length === pathList.length && successFn(model))
      })
    } else if (path.indexOf('gltf') > -1) {
      // gltf模型文件路径
      gltfLoader.load(path, gltf => {
        model.push({
          url: path,
          model: gltf.scene
        })
        // 当存储模型的对象的数组的长度与传入的路径对象的数组的长度相同 代表加载过程已经完成 可以执行成功的函数了
        // (model.length === pathList.length && successFn(model))
      })
    }
  })

}